<template>
	<view class="page__bd">
		<view class="hb-bar bg-white solid-bottom">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				平分
			</view>
		</view>
		<view class="bg-white">
			<view class="hb-tabs">
				<view class="hb-tabs__nav solid-bottom text-center">
					<view class="hb-tab hb-ellipsis flex-sub" :class="index==tabCur?'text-orange':''" v-for="(item,index) in 4" :key="index"
					 @tap="tabSelect" :data-id="index">
						<text :class="index==tabCur?'hb-tab--active':''">Tab{{index}}</text>
					</view>
				</view>
				<view class="hb-tabs__content demo-tab">
					<view class="hb-tab__pane">
						当前标签：{{tabCur}}
					</view>
				</view>
			</view>
		</view>
		<view class="hb-bar bg-white solid-bottom">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				标签栏滚动
			</view>
		</view>
		<view class="bg-white">
			<view class="hb-tabs">
				<view class="hb-tabs__nav solid-bottom">
					<scroll-view scroll-x scroll-with-animation :scroll-left="scrollLeft">
						<view class="hb-tab hb-ellipsis" :class="index==tabCur?'text-green':''" v-for="(item,index) in 10" :key="index"
						 @tap="tabSelect" :data-id="index">
							<text :class="index==tabCur?'hb-tab--active':''">Tab{{index}}</text>
						</view>
					</scroll-view>
				</view>
				<view class="hb-tabs__content demo-tab">
					<view class="hb-tab__pane">
						当前标签：{{tabCur}}
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCur: 0,
				scrollLeft: 0
			}
		},
		methods: {
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				console.log('scrollLeft', this.scrollLeft)
			}
		}
	}
</script>

<style lang="less">
	.demo-tab .hb-tab__pane {
		padding: 25upx 20upx;
		background-color: #fff;
	}
</style>
